<template>
	<div style="padding:0 37px 0 44px">
    <div class="breadcrumb-father">
      <div class="new-breadcrumb">
        
        <router-link  :to="{path:'/welcome'}">
          <img src="../../../assets/imgs/Home.png" alt="">
        </router-link>
        <router-link :to="{path:'/agentAudit'}">{{$t('agent.agentApproval')}}</router-link>
        <span class="arrow">></span>
        <!-- <icon-svg icon-class="setting"></icon-svg> -->
        <span :title="$route.query.name">{{$route.query.name}}</span>
      </div>
    </div>

		<div class="handle_box">
        <ul class="button_box" v-if=" userPhone === '13501189583' || userPhone === '15018955912' || userPhone === '15219441946' ? false : true ">
            <li class="confirm" @click="yes(2)">
                <icon-svg icon-class="xiugai" class="icon-btn"></icon-svg>{{$t('button.Approve')}}
            </li>
            <li class="cancel" @click="yes(0)">
                <icon-svg icon-class="quxiao" class="icon-btn"></icon-svg>{{$t('cash.reject')}}
            </li>
        </ul><!-- button_box结束 -->
    </div><!-- handle_box结束 -->

    <!-- 防止表格层被遮挡 -->
    <div class="table-space-div"></div>

    <div class="table-div" id="one">
      <div class="title">{{$t('agent.CompanyInfo')}}</div>
      <ul class="content">
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Name')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.name" id="name" type="text" :readonly="showDetails" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Type')}}:</div>
          </div>
          <div class="right-div"><input v-model="agentData.idType" id='idType' type="text" :readonly="showDetails" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Address')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.address" id='address' type="text" :readonly="showDetails" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.MailAddr')}}:</div>
          </div>
          <div class="right-div"><input v-model="agentData.mailingAddress" id='mailingAddress' type="text" :readonly="showDetails" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('mer.BRNo')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.registrationNumber" id='registrationNumber' type="text" :readonly="showDetails" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Contact')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.contacts" id='contacts' type="text" :readonly="showDetails" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont" v-if="companyId=='2'">{{$t('mec.Email')}}*:</div>
            <div class="cont" v-else>{{$t('mec.Email')}}:</div>
          </div>
          <div class="right-div"><input v-model.lazy="agentData.email" :readonly="showDetails" id="Email" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont" v-if="companyId=='2'">{{$t('agent.PhoneNo')}}:</div>
            <div class="cont" v-else>{{$t('agent.PhoneNo')}}*:</div>
          </div>
          <div class="right-div"><input v-model.lazy="agentData.phone" type="text" :readonly="showDetails" id="phone" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.MobileNo')}}*:</div>
          </div>
          <div class="right-div">
              <input v-model.lazy="agentData.telephone" type="text" :readonly="showDetails" id="telephone" class="view-input" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('search.UpperLevel1')}}*:</div>
          </div>
          <div class="right-div">
            <input v-model="agentData.parentName" id="parentName" type="text" :readonly="showDetails" class="view-input" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.UpperLevelID')}}*:</div>
          </div>
          <div class="right-div"><input v-model.lazy.trim="agentData.parentNumber" id="parentNumber" type="text" readonly="true" class="view-input" /></div>
        </li>
      </ul><!-- content结束 -->
    </div><!-- table-div结束 -->

    <div class="table-div" id="two" v-show="showOtherInfo">
      <div class="title">{{$t('mec.SettlementInfo')}}</div>
      <ul class="content">
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Method')}}*:</div>
          </div>
          <div class="right-div">
            <input v-model="agentData.clearingMode" id="clearingMode" type="text" :readonly="showDetails" :class="{'view-input': showDetails}" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Bank')}}*:</div>
          </div>
          <div class="right-div">
            <input v-model="agentData.bankname" id='bankname' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('mer.BankCode1')}}*:</div>
          </div>
          <div class="right-div"><input type="text" v-model="agentData.bankCode" id="bankCode" :readonly="showDetails" :class="{'view-input': showDetails}" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('mer.AccountName')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.drawname" id='drawname' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('mer.AccountNo')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.bankaccount" id='bankaccount' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">SWIFT:</div>
          </div>
          <div class="right-div"><input v-model="agentData.SWIFTcode" id='SWIFTcode' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" /></div>
        </li>
      </ul><!-- content结束 -->
      <!-- <div class="circle-title">Shop photos</div> -->
    </div><!-- table-div结束 -->

    <div class="table-div" id="three" v-show="showOtherInfo">
      <div class="title">{{$t('agent.CommissionInfo')}}</div>
      <ul class="content">
        <li class="item">
          <div class="left-div">
            <div class="cont">POS{{ currency }}*:</div>
          </div>
          <div class="right-div">
            <input v-model="agentData.posMachine" id='posMachine' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Scanner')+ currency}}*:</div>
          </div>
          <div class="right-div">
            <input v-model="agentData.scanner" id='scanner' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.SubscriptionFee')+ currency}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.franchiseFee" id='franchiseFee' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.OfflineBase')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.lineBaseRate" id='lineBaseRate' type="number" :readonly="showDetails" :class="{'view-input': showDetails}" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.OnlineBase')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.onLineBaseRate" id='onLineBaseRate' type="number" :readonly="showDetails" :class="{'view-input': showDetails}" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.OfflineComm')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.lineBrokerage" id='lineBrokerage' type="number" :readonly="showDetails" :class="{'view-input': showDetails}" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.OnlineComm')}}*:</div>
          </div>
          <div class="right-div"><input v-model="agentData.onLineBrokerage" id='onLineBrokerage' type="number" :readonly="showDetails" :class="{'view-input': showDetails}" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.EndDate')}}:</div>
          </div>
          <div class="right-div">
            <input v-model="agentData.shutDownDate" id='endDate' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('AuMer.SettlementPeriod')}}*:</div>
          </div>
          <div class="right-div">
            <input type="text" v-model="settlementCycle" id="settlementCycle" :readonly="showDetails" :class="{'view-input': showDetails}" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('salesman.Salesman')}}*:</div>
          </div>
          <div class="right-div">
            <input v-model="agentData.salesmanName" id='salesmanName' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.BDStaffNo')}}*:</div>
          </div>
          <div class="right-div">
            <input v-model="agentData.salesmanNumber" id='salesmanId' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.commissionRatio')}}:</div>
          </div>
          <div class="right-div">
            <input v-model="agentData.proportion" id='proportion' type="text" :readonly="showDetails" :class="{'view-input': showDetails}" />
          </div>
        </li>
      </ul><!-- content结束 -->
      <!-- <div class="circle-title">Shop photos</div> -->
    </div><!-- table-div结束 -->

    <div style="height: 100px;"></div>

	</div>
</template>

<script>
import { auditAgentDetails, updateStateAgent } from "api/merchant/agent/index";
export default {
  name: "agentAudit",
  data() {
    return {
      showDetails: true,
      userPhone:localStorage.getItem('phone'),
      agentData: {
        name: undefined,
        idType: undefined,
        address: undefined,
        mailingAddress: undefined,
        registrationNumber: undefined,
        contacts: undefined,
        email: undefined,
        phone: undefined,
        telephone: undefined,
        parentName: undefined,
        parentId: undefined,
        clearingMode: undefined,
        bankname: undefined,
        bankaccount: undefined,
        drawname: undefined,
        SWIFTcode: undefined,
        posMachine: undefined,
        scanner: undefined,
        franchiseFee: undefined,
        lineBaseRate: undefined,
        onLineBrokerage: undefined,
        lineBrokerage: undefined,
        onLineBrokerage: undefined,
        endDate: undefined,
        salesmanName: undefined,
        salesmanNumber: undefined,
        proportion: undefined,
        password: undefined,
        debId: undefined
      },
      settlementCycle:undefined,
      agentOldData: {},
      agentNewData: {},
      agentOldArr: [],
      agentNewArr: [],
      num: 0,
      checktype: "",
      companyId: localStorage.getItem("companyId"),
      currency: undefined,
      diffData:[],
      showOtherInfo:this.$route.query.grade > 1 ? false : true,
    };
  },
  created() {
    this.agentAuditDetails(this.$route.query.disId);

    setTimeout(function(){
        $("#agentAudit").addClass("is-active");
    },500)
    // $("#z_auditManage .el-menu a li:eq(2)").addClass('is-active');

    if (this.companyId == '1') this.currency = 'HK$ ';
    if (this.companyId == '2') this.currency = 'A$ ';
  },
  beforeRouteLeave(to,from, next){
    if(to.path === '/agentAudit'){
      next();
    } else {
      $("#z_auditManage .el-menu a li:eq(2)").removeClass('is-active');
      localStorage.removeItem('searchAgentData');
      next();
    }
  },
  updated() {
    if (this.checktype === "修改信息") {
      this.agentOldArr = Object.getOwnPropertyNames(this.agentOldData);
      this.agentNewArr = Object.getOwnPropertyNames(this.agentNewData);
      for (let i = 0; i < this.agentOldArr.length; i++) {
        const propName = this.agentNewArr[i];
		    // console.log('老数据名称'+this.agentOldData[propName]+'=============='+'新数据名称'+this.agentNewData[propName]);
        if (this.agentOldData[propName] !== this.agentNewData[propName]) {
          this.num++;
          this.diffData[this.num] = document.getElementById(propName);
		      // diffData[this.num].style.color = "red";
        }
      } 
      for (let j = 0; j < this.diffData.length; j++) {
        if (this.diffData[j] != null) {
          this.diffData[j].style.color = "red";
        }
      }
    }else{
		  return false;
	}
  },
  methods: {
    //根据父组件传递的id查询出该代理商详情
    agentAuditDetails(id) {
      auditAgentDetails(id).then(res => {
        this.agentData = res.value;
        if (res.value.viceDistributor) {
          this.agentOldData = res.value.viceDistributor;
          this.agentNewData = res.value;
          this.checktype = res.value.checkType;
          delete this.agentNewData.viceDistributor;
        }
        if( this.agentData.settlementCycle == 1 ){
          this.settlementCycle = 'T+1'
        } else if ( this.agentData.settlementCycle == 2 ){
          this.settlementCycle = 'T+2'
        } else if ( this.agentData.settlementCycle == 3 ){
          this.settlementCycle = 'T+3'
        } else if ( this.agentData.settlementCycle == 4 ){
          this.settlementCycle = 'T+4'
        } else if ( this.agentData.settlementCycle == 5 ){
          this.settlementCycle = 'T+5'
        } else if ( this.agentData.settlementCycle == 6 ){
          this.settlementCycle = 'T+6'
        } else if ( this.agentData.settlementCycle == 7 ){
          this.settlementCycle = 'T+7'
        }

        if (this.agentData.clearingMode === "0") {
          this.agentData.clearingMode = this.$t("cash.check");
        }
        if (this.agentData.clearingMode === "1") {
          this.agentData.clearingMode = this.$t("cash.onlineBanking");
        }
      });
    },
    //审核该代理商
    yes(value) {
      let msg =
        this.agentData.checkType === "修改信息"
          ? this.$t("hint.ApproveChangeOfInformation")
          : this.$t("hint.ApproveRegistration");
      let rejectMsg =
        this.agentData.checkType === "修改信息"
          ? this.$t("hint.SureToRejectThisAgentInfoChange")
          : this.$t("hint.SureToRejectTheAdditionOfThisAgent");
      let modifyEnabled = {
        id: this.agentData.id,
        userId: this.agentData.userId,
        state: value
      };
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: value === 0 ? rejectMsg : msg,
        showClose: false,
        closeOnClickModal:false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      }).then(() => {
        updateStateAgent(modifyEnabled)
          .then(res => {
            // console.log(res);
            if (res.code === 0) {
              this.$notify({
                title: this.$t("hint.Success"),
                message: this.$t("hint.OperationSuccess"),
                type: "success",
                duration: 2000
              });
              this.$router.push({ path: "/agentAudit" });
            } else {
              this.$notify({
                title: this.$t("hint.Fail"),
                message: this.$t("hint.OperationFail"),
                type: "error",
                duration: 2000
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    }
  }
};
</script>

<style lang="scss" scoped>

</style>